<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function faceChange() {
        //    得到下拉框对象
            var selectObj=document.getElementById("faceSelect");
            //弹出消息框
            // alert(selectObj.value);
        //    控制台打印
            console.log("这个相当于java的system out println");
            // var imgObj=document.getElementById("faceImg");
            // if (selectObj.value=="1"){
            //     imgObj.src="../img/1.bmp";
            // }
            // else if (selectObj.value=="2"){
            //     imgObj.src="../img/2.bmp";
            // }
            // else if (selectObj.value=="3"){
            //     imgObj.src="../img/3.bmp";
            // }
            // else if (selectObj.value=="4"){
            //     imgObj.src="../img/4.bmp";
            // }

        }
        function changeImg(selectObj){
            document.getElementById("faceImg").src=selectObj.value;
            document.getElementById("bodyObj").style.backgroundImage="url("+selectObj.value+")";
        }
    </script>
</head>
<body id="bodyObj" >
<img src="../img/1.webp" width="300" height="300" id="faceImg">
<!--onchange()表示当下拉框选项变化时，触发的事件-->
<select id="faceSelect" onchange="changeImg(this)">
  <option value="../img/1.webp">春香</option>
  <option value="../img/2.webp">夏香</option>
  <option value="../img/3.webp">秋香</option>
  <option value="../img/4.webp">冬香</option>
</select>
</body>
</html>